<!-- 首页 -->
<template>
	<view class="container">
		<TopNav title="打赏记录" bg-color="#fff"></TopNav>
		<view class="header">
			<u-search :showAction="true" placeholder="请输入订单号搜索" v-model="queryParams.order_sn"
				placeholderColor="#B2B8C1" actionText="搜索" bgColor="#F0F1F2" :animation="true"
				searchIcon="/static/images/mine/search.png" style="font-size: 30rpx;" @search="getList"></u-search>
		</view>
		<view class="main">
			<view class="radius bg-white list-item m-t10" v-for="item in 10">
				<view class="flex align-center justify-between">
					<view class="flex align-center">
						<image src="/static/logo.png" class="width-28 height-28 round bg-gray" mode=""></image>
						<text class="m-l8 text-bold f-s12">向东南</text>
					</view>
					<text class="text-bold f-s16 text-theme">+25.80</text>
				</view>
				<view class="m-t12 text-gray f-s12 line-height16">
					<text style="color: #B2B8C1;">订单编号</text>
					<text class="p-l8 text-black">020202409123292780</text>
				</view>
				<view class="m-t8 text-gray f-s12 line-height16">
					<text style="color: #B2B8C1;">打赏编号</text>
					<text class="p-l8 text-black">DS202412201649362578</text>
				</view>
				<view class="m-t8 text-gray f-s12 line-height16">
					<text style="color: #B2B8C1;">打赏时间</text>
					<text class="p-l8 text-black">2024-12-20 16:49</text>
				</view>
				<view class="m-t8 text-gray f-s12 line-height16">
					<text style="color: #B2B8C1;">打赏方式</text>
					<text class="p-l8 text-black">微信</text>
				</view>
			</view>
			<view class="padding-tb-xs" v-if="total !== 0">
				<u-loadmore :status="loadmoreStatus" line @loadmore="handleScrollBottom" />
			</view>
			<Empty :show="total === 0"></Empty>
		</view>

		<view class="flex justify-center fixed-bottom bg-white full-width p-lr16" @click="handleSubmit">
			<view class="self-btn full-width">
				<text>转余额</text>
			</view>
		</view>

		<Modal :show.sync="modalShow" content="您确定要将打赏金额转为余额吗？" @confirm="handleModalConfirm"></Modal>
	</view>
</template>

<script>
	import mixins from "@/mixins";
	import Modal from '@/components/modal/index.vue'
	import Empty from '@/components/empty/index.vue'
	import {
		rewardList,
		rewardBalance
	} from "@/api/mine"
	export default {
		name: "",
		mixins: [mixins],
		components: {
			Modal,
			Empty
		},
		data() {
			return {
				modalShow: false,
				list: [],
				queryParams: {
					order_sn: '',
					page: 1,
					limit: 10
				},
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			this.handleScrollBottom()
		},
		methods: {
			handleModalConfirm() {
				this.$modal.loading('处理中...').then(() => {
					rewardBalance().then(res => {
						this.$modal.closeLoading()
					}).catch(() => this.$modal.closeLoading())
				})

			},
			handleSubmit() {
				this.modalShow = true
			},
			getList() {
				rewardList(this.queryParams).then(res => {
					let {
						data: {
							list,
							count,
							total
						}
					} = res
					this.total = count || 0
					this.pageTotal = total || 0
					if (this.queryParams.page === this.pageTotal) this.loadmoreStatus = 'nomore'
					if (this.queryParams.page === 1) {
						this.list = list
					} else if (this.queryParams.page < this.pageTotal) {
						this.list = this.list.concat(list)
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/css/var.scss';

	.container {
		background-color: inherit;

		.header {
			position: sticky;
			@include sticky-top;
			z-index: 999;
			background-color: #fff;
			padding: 24rpx 24rpx 16rpx 24rpx;

		}

		.main {
			padding: 0 24rpx 24rpx 24rpx;

			.card {
				width: 100%;
				border-radius: 20rpx;
				background-color: #fff;
				padding: 20rpx 32rpx 34rpx 32rpx;
				margin-bottom: 20rpx;

				.card-line {
					width: 2rpx;
					height: 72rpx;
					background-color: #DDE0E6;
				}
			}

			.list-item {
				padding: 24rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>